/**
 * As seen in ./.storybook/main.js, this file is used to provide
 * the Big Calendar styles in Storybook
 */
@import '../../src/sass/styles.scss';
@import '../../src/addons/dragAndDrop/styles.scss';

.height600 {
  position: relative;
  height: 600px;
}

.examples--header {
  margin: 0 40px;
  text-align: center;
}

.dndOutsideSourceExample {
  @extend .examples--header;
  display: flex;
  > .inner {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    h4 {
      color: grey;
      width: 100%;
    }
    div[draggable] {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid gray;
      border-radius: 4px;
      width: 100px;
      margin: 10px;
      cursor: grab;
    }
    input[type='checkbox'] {
      margin-right: 5px;
    }
  }
}

.card {
  background-color: white;
  border: 0;
  padding: 24px;
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.isDraggable {
  cursor: grab !important;
}

.nonDraggable,
.nonResizable {
  background-color: lighten(#3174ad, 40) !important;
  color: black !important;
}
